<template>
    <div class="outbg">
        <div class="search">
            <input type="text" :class="strong" v-model="value" @click="inp" ref="inp" @blur="blur">
            <button class="searchBtn" @click="search">搜索 <i :class="index"></i></button>
            <div :class="'list ' + idx" @click="musicClick">
                <p v-for="item in selectList" :name="item.name"  :index="item.id" :key="item.id"><span :imgSrc="item.artists[0].img1v1Url" :musicId="item.id">歌曲 : {{item.name}}</span><span>作者 ：{{item.artists[0].name}}</span></p>
            </div>
        </div>
        <div class="bg">
            <div class="title">{{musicName}}</div>
            <div class="userName">{{userName}}</div>
            <!-- <el-empty description="描述文字"></el-empty> -->

            <img :class="rotateImg" v-if="rotateImg !== ''" :src="imgSrc" alt="" style="width: 350px;height: 350px;border-radius: 50% !important;">

            <video id="audio" :src="videoSrc" loop :autoplay="autoPlay" ref="audio"></video>
            <!-- 开始暂停按钮 -->
            <div :class="'start_over ' +start" @click="start_over">
                <b class="start" v-if="flag"></b>
                <b class="over" v-else>| |</b>
            </div>
        </div>
    </div>
</template>

<script>
import { musicList, getMusicSrc } from '@/api/music'
export default {
    data(){
        return {
            num : 0,
            id: 35313032,
            // 播放停止信号量
            flag : false,
            // 搜索加载loading
            index : '',
            // 搜索输入框绑定的值
            value : '',
            Disabled : false,
            strong : '',
            // 搜索下拉框数据
            selectList : [],
            // 输入框下拉列表动态class名 下拉
            idx : '',
            // 歌曲名
            musicName : '',
            // 作者
            userName : '',
            // 播放与暂停的显示消失信号量
            start: '',
            // 中间旋转图片的src
            imgSrc: '',
            // viedo的src
            videoSrc: '',
            // videoId
            videoId: '',
            // 图片初始路径
            rotateImg: '',
            autoPlay: ''
        }
    },
    created(){
        
    },
    mounted(){
    },
    methods:{
        // 播放 或者 停止播放
        start_over(){
            this.flag = !this.flag
            let audio = document.querySelector('#audio')

            if(this.flag){
                // 停止播放
                audio.pause()
                this.rotateImg = 'rotateImg norotateImg'
            }else{
                // 继续播放
                audio.play()
                this.rotateImg = 'rotateImg'
            }
        },
        // 搜索按钮
        search(){
            if(this.Disabled){
                return
            }
            this.Disabled = true
            setTimeout(()=>{
                this.Disabled = false
            },2000)
            
            if(this.value.length > 0){
                // 显示loading
                this.index = 'act'
                this.flag = false
                // 调用获取歌单列表接口
                musicList(this.value).then(res=>{
                    console.log(res);
                     // 取消loading
                    this.index = ''
                    this.idx = 'idx'
                    this.selectList = res.result.songs
                })
            }else {
                // 登陆失败
                this.$message({
                    type : 'warning',
                    message : '请输入要搜索的歌名 !'
                })
            }
        },
        // 输入框点击事件
        inp(){
            this.strong = 'strong'
            // 关闭下拉框
            this.idx = ' '
        },
        // 输入框取消选中事件
        blur(){
            this.strong = ''
        },
        // 获得搜索出来的歌曲点击的是哪一个
        musicClick(e){
            console.log(e.target.children[0]);
            // 关闭下拉框
            this.idx = ' '
            this.start = 'starts'
            this.musicName = e.target.getAttribute('name')
            this.userName =  e.target.children[1].innerText
            // 获得点击的歌曲图片的musicId
            this.imgSrc = e.target.children[0].getAttribute('imgSrc')
            // 获得你选择的歌曲的id
            this.musciId = e.target.children[0].getAttribute('musicid')

            // 调用获取歌曲的src接口
            getMusicSrc(this.musciId).then(res => {
                console.log(res);
                // 播放
                this.videoSrc = res.data[0].url
                this.rotateImg = 'rotateImg'
                this.autoPlay = 'autoplay'
            })
        }
    }
}
</script>

<style scoped>
    .bg{
        width: 500px;
        height: 70%;
        /* background-color: red; */
        position: absolute;
        left: 47%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        overflow: hidden;
        user-select: none;
        /* border: 1px solid #fff; */
        /* background-image: linear-gradient(to top, transparent,transparent,rgb(131, 130, 130), transparent,transparent); */
    }
    .title{
        font-size: 25px;
        font-weight: 600;
        letter-spacing: 2px;
    }
    p{
        color: #ccc;
        font-size: 14px;
    }
    .active{
        font-size: 18px;
        color: #fff;
    }
    .start_over{
        cursor: pointer;
        border: 1px solid #20AAE9;
        color: #20AAE9;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 50px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        display: none;
    }
    .start{
        width: 0;
        height: 0;
        display: block;
        border: 10px solid transparent;
        border-left-color: #20AAE9;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-15%,-50%);
    }
    .outbg{
        width: 100%;
        height: 100%;
    }
    .search{
        width: 100%;
        height: 50px;
        padding: 0 33%;
        position: relative;
        top: 30px;
    }
    .search input{
        outline: none;
        width: 400px;
        height: 45px;
        border-radius: 10px;
        border: 1px solid #20AAE9;
        margin: 0;
        padding-left: 40px;
        background-color: transparent;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        box-shadow:0px 0px 5px 1px #20AAE9;
    }
    .searchBtn{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        margin-left: 10px;
        background-color: rgba(0,0,0,.4);
        color: #fff;
        box-shadow:0px 0px 5px 2px #20AAE9;
        font-size: 16px;
        font-weight: 600;
        position: relative;
    }
    .strong{
        box-shadow:0px 0px 10px 5px #20AAE9 !important;
    }
    .searchBtn .act{
        display: block;
        width: 5px;
        height: 5px;
        background-color: #b0ddf1;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        box-shadow:0px 0px 5px 2px #20AAE9;
        /* transform: translate(-50%, -50%); */
        animation:action .3s linear infinite;
    }
    @keyframes action
    {
        from{transform: rotate(0deg)  translate(26px) rotate(0deg);}
        to{transform: rotate(360deg) translate(26px) rotate(-360deg);}
    }
    .list{
        width: 440px;
        /* height: 300px; */
        margin-top: 5px;
        margin-left: 2px;
        border-radius: 5px;
        box-shadow:0px 0px 5px 2px #20AAE9;
        background-color: rgba(0,0,0,.5);
        position: relative;
        z-index: 5;
        overflow-y: scroll;
        padding: 0 5px;
        display: none;
    }

    .starts{
        display: block;
    }
    .idx{
        display: block;
        animation: select .5s linear forwards;
    }
    .list::-webkit-scrollbar{
        width: 10px;
    }
    .list::-webkit-scrollbar-thumb{
        background-color: #20AAE9;
        border-radius: 20px;
    }
    .list::-webkit-scrollbar-track{
        background-color: rgb(228, 220, 220);
        border-radius: 20px;
    }
    @keyframes select
    {
        from{height: 0;}
        to{height: 200px;}
    }
    .list p {
        cursor: pointer;
        display: block;
        height: 30px;
        margin: 0;
        padding: 0;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
    }
    .list p:hover{
        background-color: black;
    }

    .rotateImg{
        position: absolute;
        left: 15%;
        top: 100px;
        animation: rotateImg 10s infinite linear;
        background-position: 100% 100%;
    }
    .norotateImg{
        animation-play-state: paused;
    }
     @keyframes rotateImg
    {
        from{transform: rotate(0deg);}
        to{transform: rotate(360deg);}
    }
</style>